<template>
  <table>
    <thead>
      <tr role="row">
        <th></th>
        <th v-for="t in title" :key="t">{{ t }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, i) in props.MusicDetailList" :key="i" @click="playMusic(i)">
        <td><span v-if="i < 9">0</span>{{ i + 1 }}</td>
        <td v-if="!item.pic">
          <svg class="icon" @click.stop="emit('handleIcon', i)">
            <use :xlink:href="item.icon"></use>
          </svg>
        </td>
        <td v-else><img :src="(item.pic as string)" alt="" /></td>
        <td>{{ item.name }}</td>
        <td>{{ item.artist }}</td>
        <td>{{ item.album }}</td>
        <td>{{ item.time }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useSendReq } from "@/store/sendReq/index";
import { useAudio } from "@/store/audio";
import { useThemeColor } from "@/store/themeColor";
const title = ["操作", "音乐标题", "歌手", "专辑", "时长"];
const sendReq = useSendReq();
const audio = useAudio();
const emit = defineEmits(["handleIcon"]);
const props = defineProps<{ MusicDetailList: musicDetail[]; height: string }>();
const themeColor = useThemeColor();

const playMusic = (index: number) => {
  audio.$patch(() => {
    audio.musicList = [];
    audio.song = [];
    audio.paly = true;
  });
  const req = (info: musicDetail) => {
    sendReq.getPlayMusic(info.id).then((res) => {
      if (res.data[0].url && audio.musicList.length < 20) {
        audio.musicList.push(res.data[0].url);
        audio.song.push(info);
      }
    });
  };
  audio.musicList.length == 0 && req(props.MusicDetailList[index]);

  props.MusicDetailList.forEach(async (item, i) => {
    // 第一次
    if (audio.sort == "随机") {
      // 随机数
      let length = props.MusicDetailList.length;
      const whileI = [...props.MusicDetailList];
      while (length) {
        const j = Math.floor(Math.random() * length--);
        // 通过随机数打乱排序
        [whileI[length], whileI[j]] = [whileI[j], whileI[length]];
      }
      req(whileI[i]);
      // 顺序
    } else if (i > index) req(props.MusicDetailList[i]);
  });
};

const musicRef = ref();
defineExpose({ playMusic });
</script>

<style scoped lang="less">
table {
  margin-top: 30px;
  thead {
    width: 1614px;
    display: flex;
    border: 1px solid #dcdfe6;
    align-items: center;
    border-left: 0;
    border-right: 0;

    th {
      padding-left: 5px;
      height: 100%;
      line-height: 30px;
      border-left: 1px solid #dcdfe6;
      text-align: left;
    }
    th:nth-child(1) {
      border-left: 0;
      width: 40px;
    }
    th:nth-child(2) {
      width: 50px;
    }
    th:nth-child(3) {
      width: 450px;
    }
    th:nth-child(4) {
      width: 450px;
    }
    th:nth-child(5) {
      width: 450px;
    }
    th:nth-child(6) {
      width: 100px;
      border-right: 0;
    }
  }
  tbody {
    tr:nth-child(odd) {
      background-color: v-bind("themeColor.themeBgColor.themePbg");
    }
    tr {
      height: v-bind("props.height");
      display: flex;
      align-items: center;
    }
    td {
      height: 100%;
      line-height: v-bind("props.height");
      text-align: left;
      padding-left: 7px;
    }
    td:nth-child(1) {
      width: 40px;
    }
    td:nth-child(2) {
      > .icon {
        font-size: 22px;
      }
      width: 50px;
      overflow: hidden;
      border-radius: 5px;
      box-sizing: border-box;
      padding-top: 5px;
      box-sizing: border-box;
      img {
        height: 100%;
        width: 100%;
        vertical-align: -0.15em;
      }
    }
    td:nth-child(3) {
      width: 450px;
    }
    td:nth-child(4) {
      width: 450px;
    }
    td:nth-child(5) {
      width: 450px;
    }
    td:nth-child(6) {
      width: 100px;
    }
  }
}
</style>
